<!--
 * @description: 新增普通会员余额提现按钮
 * @Author: latiao
 * @Date: 2021-11-10 14:36:19
 * @LastEditors: latiao
 * @LastEditTime: 2021-11-24 14:23:04
-->
<template>
  <div class="finance">
    <m-card class="finance__sts">
      <div class="left">
        收入（{{ account.incomeNumber }}笔）
        <br />
        <span>+{{ account.incomeAmount }}元</span>
      </div>
      <div class="right">
        支出（{{ account.expensesNumber }}笔）
        <br />
        <span>-{{ account.expensesAmount }}元</span>
      </div>
    </m-card>
    <m-container
      class="order"
      :pagination-visible="false"
      :current.sync="query.current"
      :size.sync="query.size"
      :total.sync="query.total"
    >
      <template slot="content">
        <el-tabs v-model="active" @tab-click="clickTab">
          <el-tab-pane label="全部" name="1"></el-tab-pane>
          <el-tab-pane label="收入" name="2"></el-tab-pane>
          <el-tab-pane label="支出" name="3"></el-tab-pane>
        </el-tabs>
        <div class="finance__form">
          <el-date-picker
            v-model="createTime"
            style="margin-right:15px"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="chooseTime"
          ></el-date-picker>
          <el-select
            v-model="query.type"
            placeholder="请选择"
            @change="selectStatus"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </div>
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{
            background: '#f6f8fa',
            'font-weight': 'normal',
            color: 'black',
          }"
        >
          <template slot="empty">
            <div class="emptyLine">
              暂无数据~
            </div>
          </template>
          <el-table-column label="交易流水号" width="180">
            <template slot-scope="dataItem">
              <div>{{ dataItem.row.sn }}</div>
            </template>
          </el-table-column>
          <el-table-column label="对方信息" width="180">
            <template slot-scope="dataItem">
              <div class="userMsg">
                <img :src="dataItem.row.userAvatarUrl" alt="" />
                <div>{{ dataItem.row.userName }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="交易类型">
            <template slot-scope="dataItem">
              <template v-if="dataItem.row">
                <div v-if="dataItem.row.type === 'TRADE'">商品交易</div>
                <div v-if="dataItem.row.type === 'RETURN'">退款</div>
                <div v-if="dataItem.row.type === 'REBATE'">消费返利</div>
                <div v-if="dataItem.row.type === 'DISTRIBUTOR_FOR_USER'">余额提现</div>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="收支金额（元）">
            <template slot-scope="dataItem">
              <div>
                {{ dataItem.row.capitalFlows === "IN" ? "+" : "-"
                }}{{ dataItem.row.amount }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="交易时间">
            <template slot-scope="dataItem">
              <div>{{ dataItem.row.createTime }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-link
                @click.native="lookDetail(row)"
                type="primary"
                :underline="false"
                >详情</el-link
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </m-container>
    <FnanceMainModal
      :visible.sync="visible"
      :detail="detail"
      :detailIsOrder="detailIsOrder"
      :title="title"
    />
    <PageManage
      :pageSize="query.size"
      :pageNum="query.current"
      :total="total"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></PageManage>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import FnanceMainModal from "./components/FnanceMainModal.vue";
import {
  getFinTrade,
  getWaterRecode,
  getWithdrawalDetail,
} from "@/api/finance/index";
import { getOrderDetail } from "@/api/order";
import DateUtil from "@/store/modules/date";
import PageManage from "@/components/PageManage.vue";

@Component({ components: { FnanceMainModal, PageManage } })
export default class Index extends Vue {
  active = "1";

  visible = false;

  currentRow: any = {};

  /** 搜索条件 */
  query = {
    type: "",
    flowType: -1, // -1->全部;0->收入;1->支出
    startTime: new DateUtil("").getYMDs(+new Date()),
    endTime: new DateUtil("").getYMDs(+new Date()),
    current: 1,
    size: 10,
  };

  /** 对账单概况 */
  account = {
    expensesAmount: "", // 支出金额
    expensesNumber: "", // 支出次数
    incomeAmount: "", // 收入金额
    incomeNumber: "", // 收入次数
  };

  createTime = [
    new DateUtil("").getYMDs(+new Date()),
    new DateUtil("").getYMDs(+new Date()),
  ];

  /** 数据总数 */
  total = 0;

  options = [
    { label: "全部", value: "" },
    { label: "商品交易", value: "TRADE" },
    { label: "退款", value: "RETURN" },
    { label: "普通会员余额提现", value: "DISTRIBUTOR_FOR_USER" },
    { label: "消费返利", value: "REBATE" },
  ];

  get title() {
    const obj: any = {};
    this.options.map(item => {
      obj[item.value] = item.label;
    });
    return obj[this.currentRow.type] || "详情";
  }

  /** 单条提现详情 */
  detail: any = {};

  tableData = [];

  detailIsOrder = false;

  created() {
    this.init();
  }

  /** 请求是否为详情请求 */
  getDetailIsOrder(row) {
    return row.type === "TRADE" || row.type === "RETURN"||row.type === "REBATE";
  }

  /** 查看详情 */
  lookDetail(row) {
    this.currentRow = row;
    this.detailIsOrder = this.getDetailIsOrder(row);
    if (this.detailIsOrder) {
      this.getOrderDetail(row.sourceId);
    } else {
      this.getWithdrawalDetail(row.sourceId);
    }
    this.toggleVisible();
  }

  /**
   * 切换详情弹窗
   */
  toggleVisible() {
    this.visible = !this.visible;
  }

  /**
   * 初始化获取数据
   */
  init() {
    this.query.current = 1;
    this.getTrade();
    this.getRecord();
  }

  /**
   * 切换顶部状态
   */
  clickTab(e) {
    // this.query.flowType = Number(e.name) - 2;å
    Object.assign(this.query, {
      flowType: Number(e.name) - 2,
      startTime: new DateUtil("").getYMDs(+new Date()),
      endTime: new DateUtil("").getYMDs(+new Date()),
      type: "",
    });
    this.createTime = [new DateUtil("").getYMDs(+new Date()),new DateUtil("").getYMDs(+new Date()),];
    this.init();
  }

  /**
   * 选择时间
   */
  chooseTime(data) {
    this.query.startTime = data ? new DateUtil("").getYMDs(data[0]) : "";
    this.query.endTime = data ? new DateUtil("").getYMDs(data[1]) : "";
    this.query.current = 1;
    this.getTrade();
    this.getRecord();
  }

  /**
   * 下拉框选择
   */
  selectStatus(type) {
    this.query.current = 1;
    Object.assign(this.query, { type, current: 1 });
    this.getRecord();
  }

  /**
   * 获取订单详情
   */
  getOrderDetail(id) {
    getOrderDetail(id)
      .then(res => {
        this.detail = res.data;
      })
      .catch(err => {
        this.$message.warning(err || "详情获取失败");
      });
  }

  /**
   * 获取提现详情
   */
  getWithdrawalDetail(id) {
    getWithdrawalDetail({ id })
      .then(res => {
        this.detail = res.data;
      })
      .catch(err => {
        this.$message.warning(err || "详情获取失败");
      });
  }

  /**
   * 获取对账单详情
   */
  getTrade() {
    getFinTrade(this.query).then(res => {
      this.account = { ...res.data };
    });
  }

  /**
   * 获取对账单流水
   */
  getRecord() {
    getWaterRecode(this.query).then(res => {
      this.tableData = res.data.list;
      this.total = res.data.total;
    });
  }

  /**
   * @method handleSizeChange
   * @description 每页 条
   */
  handleSizeChange(val) {
    this.query.current = 1
    this.query.size = val;
    this.getRecord();
  }

  /**
   * @method handleCurrentChange
   * @description 当前页
   */
  handleCurrentChange(val) {
    this.query.current = val;
    this.getRecord();
  }
}
</script>

<style lang="scss">
@include b(finance) {
  @include e(form) {
    margin: 10px 0;
  }
  @include e(sts) {
    @include flex(flex-start);

    font-size: 14px;
    color: #666666;
    .left {
      span {
        color: #4bb1a6;
        font-size: 18px;
        margin-top: 10px;
      }
    }
    .right {
      margin-left: 300px;
      span {
        font-size: 18px;
        color: #ff0000;
        margin-top: 10px;
      }
    }
  }

  .userMsg {
    display: flex;
    align-items: center;
  }

  .userMsg > img {
    width: 50px;
    height: 50px;
    margin-right: 20px;
  }

  .el-range-separator {
    padding: 0 20px !important;
  }
}

.emptyLine {
  width: 100%;
  height: 80px;
  background-color: white;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  margin-left: -15px;
  font-size: 14px;
  color: #b3b3b3;
}
</style>
